<template>
  <div>
    <div>
        <h3 id="title"></h3>
    </div>

    <div>
        <h5 id="student"></h5>
    </div>

    <div class="header">
        <div class="text" style="float:left;margin-right:66px">
            <span style="font-size:20px">名称:&nbsp;&nbsp;&nbsp;&nbsp;</span><span  style="font-size:22px;font-weight:bold;color:darkred">{{name}}</span>
        </div>

        <div class="text" style="float:left;margin-right:66px">
            <span style="font-size:20px">总分:&nbsp;&nbsp;&nbsp;&nbsp;</span><span  style="font-size:22px;font-weight:bold;color:darkred">{{scores}}</span>
        </div>

        <div class="text" style="float:left">
            <span style="font-size:20px">密级:&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="font-size:22px;font-weight:bold;color:darkred">{{secret1}} </span>
        </div>
    </div>

    <div class="item questions" v-for="(item,index) in questionTypes" :key="index">
                    <div type-id="1" style="font-size: 24px;font-weight: 500;line-height: 1.1;margin-top: 20px;margin-bottom: 10px;">
                        {{item.type.type}}</div>
                        <div id="source1" class="source">
                          <div class="shuffle-item" v-for="(i,cindex) in questionTypes[index].questionDetailRanks" v-bind:key="cindex">
                            <div><label>序号</label>&nbsp;&nbsp;<label style="font-size:18px">{{i.rank}}</label>
                              <div class="index">
                              </div>
                              </div> 
                              <br>
                            <div><label>分值</label>
                              <div class="score" contenteditable="true">
                                  <label>{{i.scores}}</label>
                              </div>
                              </div>
                            </div>
                          </div>
                          <div id="target1" class="target item"></div>
    </div>

    <div class="text">
        <strong class="lead text-info" style="float:left;margin:0">试卷备注信息   {{remark}} </strong>
        <p id="remark"></p>
    </div>
   </div>

</template>

<script>
import { postRequest } from "../utils/api";

export default {
    mounted() {
        // 接口调用
        this.id = this.$route.params.id
        postRequest('/pre_base/get_pre_base?pre_base_id='+this.id).then(res => {
            console.log(res.data.data)
            this.secret = res.data.data.secret
            this.scores = res.data.data.scores
            this.name = res.data.data.name
            this.remark = res.data.data.remark
            this.questionTypes = res.data.data.questionTypes
            })
            .catch(err => {
                console.log(err);
                })
        // 将接口返回的secret数字转换为文字
        if(this.secret === 0){
            this.secret1 = '无密级'
        } else if(this.secret1 === 1){
            this.secret = '秘密'
        } else if (this.secret1 === 2){
            this.secret = '机密'
        } 
        this.secret1 = '绝密'
    },
    data(){
        return{
            msg:'',
            secret:'',// 密级（接口数字）
            secret1:'',// 密级（文字）
            name:'',// 试卷名
            scores:'',// 总分
            remark:'',// 备注
            questionTypes:'',
            questionDetailRanks:'',
            index: 0,
            data: '',
            id: this.$route.params.id
        }
    }
}
</script>

<style scoped>
        .header {
            overflow: hidden;
        }

        .item {
            border-left: 10px;
            margin: 5px;
            padding: 5px;
            border: solid 2px rgba(11,128,238,0.05);
        }
        .text {
            margin: 20px;
        }
        #title {
            text-align: center;
        }
        #student {
            text-align: center;
        }
        #secret {
            text-align: left;
        }
        #remark {
            text-indent: 2em;
        }
        .text-info {
            color: #31708f;
        }
        .lead {
            margin-bottom: 20px;
            font-size: 21px;
            font-weight: 300;
            line-height: 1.4;
        }
        #shuffle {
            font-size: 14px;
            line-height: 1.42857;
            color: #333333;
        }
        label {
            font-weight: bolder;
        }
        .item {
            border-left: 10px;
            margin: 5px;
            padding: 5px;
            border: solid 2px rgba(11,128,238,0.05);
        }
        h3 {
            font-size: 24px;
            margin-top: 20px;
            margin-bottom: 10px;
            font-weight: 500;
            line-height: 1.1;
        }
        .handle {
            cursor: move;
        }
        .shuffle-item {
            text-align: left;
            margin: 5px;
            padding: 5px;
            border: solid 1px rgba(11,128,238,0.05);
            border-radius: 5px;
            background-color: rgba(11,128,238,0.05);
            transition: opacity 0.4s ease-in-out;
            color: black;
            cursor: pointer;
        }
</style>